<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('渣土车历史监控')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: ztree-css"/>

    <th:block th:include="include :: gd-map-js"/>
    <th:block th:include="include :: gd-ui-js"/>

    <style>
        /*地图 start*/
        #container {
            width: 100%;
            height: 100%;
        }
        #content-main {
            height: calc(100% - 127px);
            overflow: hidden;
        }
        #loadingTip {
            position: absolute;
            z-index: 9999;
            top: 0;
            left: 0;
            padding: 3px 10px;
            background: red;
            color: #fff;
            font-size: 14px;
        }

        .amap-logo {
            display: none !important;
        }

        .amap-copyright {
            opacity: 0;
        }


        .input-card .btn {
            width: 50px;
            border-radius: 5px;
            margin-left: 5px;
            height: 30px;
            border: 1px solid #00a0c5;
            background: none;
            line-height: 10px;
            color: #00a0c5;
        }

        .input-card .btn:last-child {
            margin-right: 0;
        }
        .input-card{
            width: 400px;
            top: 10px;
            display: block;
            bottom: initial;
            background: #fff;
            opacity: 1;
            right: 10px;
            position: absolute;
            padding: 20px;
            opacity: 0.8;
            border-radius: 8px;
        }
        /*地图 end*/

        /*自定义窗体 start*/
        .content-window-card {
            position: relative;
            box-shadow: none;
            bottom: 0;
            left: 0;
            width: auto;
            padding: 0;
        }

        .content-window-card p {
            height: 2rem;
        }

        .custom-info {
            border: solid 1px silver;
        }

        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }

        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }

        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }

        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }

        div.info-middle {
            font-size: 12px;
            padding: 10px 6px;
            line-height: 20px;
        }

        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }

        div.info-bottom img {
            position: relative;
            z-index: 104;
        }

        span {
            margin-left: 5px;
            font-size: 11px;
        }

        .info-middle img {
            float: left;
            margin-right: 6px;
        }

        /*自定义窗体 end*/


        /*选项卡样式 start*/
        .panel-heading{
            padding: 5px;
        }
        .nav-tabs{
            display: flex;
            justify-content: space-between;
        }
        .nav-tabs>li>a{
            padding: 10px 20px 10px 20px;
        }


        /*选项卡样式 end*/

        /* 表格列样式 start*/
        table {
            table-layout:fixed;
        }
        .omd{
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }

        /* 表格列样式 end*/


        /* 窗口样式 start*/
        .wid{
            width: 50%;
            float: left;
        }
        .autoHeight{height:auto!important;min-height:0px;height:0px;}
        .autoHeight:after{display:block;clear:both;content:".";visibility:hidden;height:0;}
        .clum{
            margin: 5px auto;
        }
        .clum p{
            height: auto;
        }
        .title_n{
            width: 68px;
            float:left ;
            height: 22px;
            line-height: 20px;
            text-align: right;
            margin-bottom: 0;
        }
        .con_n{
            margin-left:70px;
            text-align: left;
            line-height: 20px;
            color: #2c4cd8;
            font-weight: 500;
            margin-bottom: 0;
        }

        .cd-eat{
            margin: 10px 0;
            border: 1px solid #b1b1b1;
            border-radius: 10px;
            padding: 5px 10px 5px 0;
        }
        .cd-eat-chicken{
            height: 30px;
            line-height: 30px;
        }
        .cd-dog1{
            width: 230px !important;
            float: left;
            height: 30px;
        }
        .cd-dog2{
            width: 20px;
            text-align: center;
            float: left;
            line-height: 30px;
        }
        .select{
            width: 70px;
            float: right;
            display: inline-block;
            /* width: 100%; */
            padding: .375rem 2px .375rem .75rem;
            line-height: 1.5;
            color: #495057;
            vertical-align: middle;
            /*background: #fff url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' v…0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E) no-repeat right .75rem center;*/
            background-size: 8px 10px;
            border: 1px solid #ced4da;
            border-radius: .25rem;
            /*-webkit-appearance: none;*/
        }
        /* 窗口样式 end*/

        /* 表格列样式 start*/

        table {
            table-layout:fixed;
        }
        .omd{
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        /* 表格列样式 end*/

        /* fse选择栏样式 */
        .fseSel{
            display: block;
            padding-left: 25px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            font-weight: 600;
            color: #495057;
        }
        /*.fseSel :hover{ color:#5073CB}*/
        .amap-icon img{
            width: 40px;
            height: 40px;
        }
    </style>

</head>
<body class="gray-bg">
<div class="ui-layout-west">

    <div class="box box-main">
        <div class="panel-heading">
            <div class="panel-options">
                <ul class="nav nav-tabs">
                    <li class="chaid active" id="on_tab">
                        <a data-toggle="tab" onclick="onlineStatus('on')" title="FSE历史轨迹查询">FSE历史轨迹查询</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="panel-heading">
            <form id="formId">
                <input type="hidden" th:value="${tlId}" id="con_tlId">
                <input type="hidden" th:value="${fseId}" id="con_fseId">
                <input type="hidden" th:value="${roleId}" id="con_roleId">

                <input style="float: right; margin-top: 6px;" type="text" class="form-control" id="buName" name="bu" maxlength="10" placeholder="请输入BU" onchange="buChange();"/>
                <input type="text" id="bu" hidden/>
                <input type="text" id="buStr" hidden/>

                <input style="float: right; margin-top: 6px;" type="text" class="form-control" id="teamleaderName" maxlength="10" placeholder="请输入TL" onchange="teamleaderChange();" name="teamleaderName" />
                <input type="text" id="teamleaderId" hidden/> <!--name="teamleaderId"-->
                <input type="text" id="teamleaderStr" hidden/>

                <input style="float: right; margin-top: 6px;" type="text" class="form-control" id="enginnerName" maxlength="10" placeholder="请输入FSE" name="enginnerName"  />
                <input type="text" id="enginnerId" hidden/><!--name="enginnerId"-->
                <input type="text" id="enginnerStr" hidden/>
                <input type="hidden" name="fseId" id="exportFseId">
                <input type="hidden" name="startTime" id="exportStartTime">
                <input type="hidden" name="endTime" id="exportEndTime">
                <!--导出历史查询按钮-->
                <a class="btn btn-warning btn-rounded btn-sm" style="float: right; margin-top: 6px;"  onclick="$.table.exportExcel()" >
                    <i class="fa fa-download"></i> 导出 </a>
                <a id="goSearch" style="float: right; margin-top: 6px;" class="btn btn-primary btn-rounded btn-sm" onclick="getFseLocation()"><i class="fa fa-search"></i>&nbsp;搜索</a>

            </form>


        </div>
        <div class="ui-layout-content" id="fseList">
        </div>
    </div>
</div>

<div class="ui-layout-center" style="overflow-y: auto;">
    <!--地图-->
    <div class="container-div map" tabindex="0" id="container" style="height: 100%"></div>

    <div class="input-card" id="carViewInfo" >

        <label style="font-size: 16px;color: #091e7b;">历史轨迹查询</label>
        <div class="input-daterange input-group ">
            <form id="form" autocomplete="off">
                <input type="hidden" id="fseId" name="fseId" value="">
                <input type="text" name="startTime" class="input-sm form-control" readonly id="laydate-startTime" placeholder="开始时间" style="width: 140px; font-size: 10px; background-color: #fff"/>
                <span style="float: left;width: 25px; text-align: center;margin-left:0;font-size: 16px;color: #c9c5c5;"> - </span>
                <input type="text" name="endTime" class="input-sm form-control" readonly id="laydate-endTime" placeholder="截止时间" style="width: 140px; font-size: 10px; background-color: #fff"/>
                <input type="button" class="btn" value="查询" id="search" onclick="selectTrack()"/>
            </form>
        </div>
        <div style="clear: both"></div>
    </div>

    <!--列表信息-->
    <!-- <div class="panel-options">
         <div class="tabs-left">
             <div id="tab-1" class="tab-pane active">
                 <div id="wj" style="padding: 10px;background: rgba(33, 103, 193, 0.83);color: #fff; display: none;">
                     开始时间:<span id="ss"></span>&nbsp;&nbsp;
                     结束时间:<span id="ee"></span>&nbsp;&nbsp;
                     轨迹点:<span id="pp"></span>&nbsp;&nbsp;
                     行驶时间:<span id="rr"></span>&nbsp;&nbsp;
                     行驶里程:<span id="oo"></span>
                 </div>
                 <div class="col-sm-12 select-table table-striped">
                     <table id="bootstrap-table1"></table>
                 </div>
             </div>
         </div>
     </div>-->

</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<th:block th:include="include :: bootstrap-suggest-js"/>
<th:block th:include="include :: bootstrap-typeahead-js"/>
<script th:src="@{/js/fsepc/bu_tl_fse.js}"></script>


<script th:inline="javascript">
    var prefix = ctx + "fse/location";
    var prefix2=ctx + "fse/locationlog";
    // 集群,点标记(多个)
    var cluster, markers = [];
    // 车辆标记
    var marker = [];
    // 轨迹路线
    var lineArr = [];
    var polyline;
    // 创建地图实例
    var map = new AMap.Map("container", {
        //showLabel: false,
        resizeEnable: true,
        center: [121.473658,31.230378],
        zoom: 15
    });

    // 初始化
    $(function() {
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 185});

        // 加载时间框
        loadDate();
        // 查询左侧人员list
        getFseLocation();
        /*  历史轨迹导出*/
        var options = {
            url: prefix2+ "/selectHistoryList",
            exportUrl: prefix2 + "/exportByRole",
            modalName: "FSE历史轨迹",
        };
        $.table.init(options);
    })

    // 查询左侧人员list
    function getFseLocation(){
        var url = ctx + "fse/location/getFseLocationHistory";
        var config = {
            url: url,
            type: "post",
            dataType: "json",
            data: {
                "bu" : $("#buName").val(),
               /* "teamleaderId" : $("#teamleaderId").val(),
                "enginnerId" : $("#enginnerId").val(),*/
                "teamleaderName" : $("#teamleaderName").val(),
                "enginnerName" : $("#enginnerName").val()
            },
            success: function(result) {
                if (result.code == web_status.SUCCESS) {
                    loadLeftHtml(result.data);
                }
            }
        };
        $.ajax(config);
    }

    // 数据解析，标点及左侧列表
    function loadLeftHtml(data){
        // console.log(JSON.stringify(data));
        var html = "";
        $.each(data,function(i,car){
            if ((!car.postx || !car.posty) && $("#con_roleId").val() != 3){
                return true;
            }
            html += '<a href="javascript:;" onclick="selectFse('+ car.fseId +');" class="fseSel"><input type="hidden" class="fseId" value="'+ car.fseId +'"><P >'+ car.fseName +'</P></a>';
        });
        //左侧列表
        $("#fseList").html(html);
        // 清空地图
        map.clearMap();
        lineArr = [];
    }

    // fse选择调用事件
    function selectFse(id) {
        $("#fseId").val(id);
        $("#exportFseId").val(id)
        $(".fseSel").each(function(i,e){
            var fseId = $(this).find("input").val();
            if (id == fseId) {
                $(this).css("backgroundColor", "#6495ED");
                $(this).css("color", "#fff");
            } else {
                $(this).css("backgroundColor", "#fff");
                $(this).css("color", "#495057");
            }
        });
        selectTrack();
    }

    //查询车辆轨迹
    function selectTrack(){
        // 清空地图
        map.clearMap();
        lineArr = [];
        var fseId = $("#fseId").val();
        if (fseId) {
            var startTime = $('#laydate-startTime').val();
            var endTime = $('#laydate-endTime').val();
            if(fseId == ""){
                $.modal.alertWarning("请选择FSE");
                return false;
            }
            if(startTime == ""){
                $.modal.alertWarning("请选择开始时间");
                return false;
            }
            if(endTime == ""){
                $.modal.alertWarning("请选择截止时间");
                return false;
            }
            if(new Date(endTime).getTime() < new Date(startTime).getTime()){
                $.modal.alertWarning("开始时间应小于结束时间");
                return false;
            }
            if(new Date(endTime).getTime() - new Date(startTime).getTime() > (24*60*60*1000)){
                $.modal.alertWarning("时间长度不可大于24小时");
                return false;
            }
            $("#exportStartTime").val(startTime);
            $("#exportEndTime").val(endTime);
            //加载列表
            // $.table.search('form', 'bootstrap-table1');

            //查询轨迹
            var url = ctx + "fse/locationlog/selectHistoryList";
            var config = {
                url: url,
                type: "post",
                dataType: "json",
                data: {
                    "fseId": fseId,
                    "startTime": startTime,
                    "endTime": endTime
                },
                success: function (result) {
                    if (result.code == web_status.SUCCESS) {
                        //加载车辆轨迹
                        if (result.data.list.length > 0) {
                            loadTrack(result.data.list);
                        } else {
                            $.modal.alertWarning("暂无轨迹数据");
                        }
                    } else if (result.code == web_status.WARNING) {
                        $.modal.alertWarning(result.msg)
                    } else {
                        $.modal.alertError(result.msg);
                    }
                }
            };
            $.ajax(config);
        } else {
            $.modal.alertWarning("请选择FSE");
        }
    }

    //创建历史轨迹组件
    function loadTrack(list){
        // 清空地图
        map.clearMap();
        lineArr = [];
        if (!list) {
            return false;
        }
        var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
        var markerContent = '' +
            '<div class="custom-content-marker">' +
            '   <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">' +
            '   <div class="close-btn" >X</div>' +
            '</div>';

        // 循环list
        $.each(list, function (i, info) {
            // console.log(JSON.stringify(info))
            var lnglat = [info.postx, info.posty];

            //记录轨迹经纬度
            lineArr.push(lnglat);

            //标记点
            // var marker = new AMap.Marker({
            //     position: lnglat,
            //     map: map,
            //     icon: '../../img/car.png',
            //     // content: markerContent,
            // });
            //点击事件
            var content = "";
            if (info.type == "2") {
                var marker = new AMap.Marker({
                    position: lnglat,
                    map: map,
                     icon: '../../img/green.png',
                    // content: markerContent,
                });
                content = "签到时间：" + info.receiveDate + "<br/>";
            } else if (info.type == "3" || info.type == "4") {
                content = "签离时间：" + info.receiveDate + "<br/>";
                var marker = new AMap.Marker({
                    position: lnglat,
                    map: map,
                    icon: '../../img/red.png',
                    // content: markerContent,
                });
            } else {
                var marker = new AMap.Marker({
                    position: lnglat,
                    map: map,
                     icon: '../../img/sky.png',
                    // content: markerContent,
                });
                content = "定位时间：" + info.receiveDate + "<br/>";
            }
            if (info.lengthOfStay) {
                content += "停留时间：" + info.lengthOfStay + "分钟";
            } else {
                // content += "停留时间：0分钟";
            }
            marker.content = content;
            marker.on('click', markerClick);
            marker.emit('click', {target: marker});
        });
        // 标记点点击事件
        function markerClick(e) {
            infoWindow.setContent(e.target.content);
            infoWindow.open(map, e.target.getPosition());
        }
        // 绘制轨迹
        polyline = new AMap.Polyline({
            map: map,
            path: lineArr,
            showDir:true,
            strokeColor: "#28F",  //线颜色
            // strokeOpacity: 1,     //线透明度
            strokeWeight: 6,      //线宽
            // strokeStyle: "solid"  //线样式
        });

        var passedPolyline = new AMap.Polyline({
            map: map,
            // path: lineArr,
            strokeColor: "#AF5",  //线颜色
            // strokeOpacity: 1,     //线透明度
            strokeWeight: 6,      //线宽
            // strokeStyle: "solid"  //线样式
        });

        map.setFitView();
    }

    //加载时间框
    function loadDate(){
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            var startDate = laydate.render({
                elem: '#laydate-startTime',
                type: 'datetime',
                value: [[${start}]],
                trigger: 'click'
            });
            var endDate = laydate.render({
                elem: '#laydate-endTime',
                type: 'datetime',
                value: [[${end}]],
                trigger: 'click'
            });
        });
    }
</script>
</body>
</html>